<!--
 * @Descripttion: 数据碰撞
 * @version: 
 * @Author: 淏
 * @Date: 2023-11-24 13:12:52
 * @LastEditors: 淏
 * @LastEditTime: 2024-04-30 15:50:42
-->
<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i style="color: #00ffff" class="el-icon-postcard"></i>
          <span style="color: #00ffff">碰撞结果列表</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <div style="display: inline-flex">
          <SelectDataSE
            class="handle-select mr10"
            @getDateSE="getDateSE"
          ></SelectDataSE>
          <el-input
            size="mini"
            v-model="query.nameKey"
            placeholder="碰撞结果名称"
            class="handle-input mr10"
          ></el-input>
          <el-button
            size="mini"
            type="primary"
            class="button"
            icon="el-icon-search"
            plain
            @click="handleSearch"
            v-waves
          >
            搜索
          </el-button>
        </div>
      </div>
      <el-row :gutter="24">
        <el-col
          :xs="10"
          :sm="10"
          :md="8"
          :lg="4"
          :xl="4"
          v-if="tableData.length != 0"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <importCard
            :color="randomRgb[index]"
            :cardData="item"
            @getImportDataS="getImportData"
          ></importCard>
        </el-col>
      </el-row>
      <!-- 表格分页  -->
      <div class="pagination">
        <pagination
          :total="pageData.total"
          :page="pageData.page"
          :size="pageData.size"
          @sizeChange="sizeChange"
          @pageChange="pageChange"
        ></pagination>
      </div>
    </div>
    <!-- 编辑dialog -->
    <el-dialog
      destroy-on-close
      :visible.sync="dialogVisible"
      :before-close="dialogClose"
      width="25%"
    >
      <div slot="title" class="dialog-footer">
        <span class="text">编辑名称</span>
      </div>
      <el-form :model="form">
        <el-form-item :label-width="formLabelWidth">
          <span slot="label">
            <span class="text">数据集名称</span>
          </span>
          <el-input
            size="mini"
            v-model="form.name"
            autocomplete="off"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          size="mini"
          class="button"
          plain
          @click="dialogVisible = false"
        >
          取 消
        </el-button>
        <el-button
          size="mini"
          class="button"
          type="primary"
          plain
          @click="handleDialog"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import importCard from '@/components/public/importCard.vue'
  import pagination from '@/components/public/pagination.vue'
  import SelectDataSE from '@/components/select/SelectDataSE/index.vue'
  import {
    queryPage_import,
    delete_import,
    update_import,
  } from '@/api/index.js'
  export default {
    // 组件名称
    name: 'collisionIndex',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: { importCard, pagination, SelectDataSE },
    // 组件状态值
    data() {
      return {
        query: {
          nameKey: '',
          startTime: '',
          endTime: '',
        },
        importType: 'collision',
        tableData: [],
        pageData: {
          total: 1,
          size: 20,
          pages: 1,
        },
        form: {
          name: '',
          importId: '',
        },
        chooseImport: {
          createTime: '',
          id: '',
          name: '',
          type: '',
        },
        //卡片选中的数据集数据
        randomRgb: [],
        dialogVisible: false,
        formLabelWidth: '100px',
      }
    },
    // 计算属性
    computed: {},
    // 侦听器
    watch: {},
    // 组件方法
    methods: {
      /**
       * @description 页面基础函数 包括页面数据获取、日期选择器、卡片颜色、卡片按钮、搜索按钮等
       * @author haoChen 15239820820@163.com
       * @export
       * @param {}
       * @return {}
       */
      handleSearch() {
        this.getData()
      },
      getData() {
        /* let loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)',
        }) */
        var qs = require('qs')
        var data = qs.stringify({
          nameKey: this.query.nameKey,
          startTime: this.query.startTime,
          endTime: this.query.endTime,
          type: this.importType,
          size: this.pageData.size,
          currentPage: this.pageData.pages,
        })
        queryPage_import(data).then((res) => {
          /*  loading.close() */
          this.pageData.total = res.data.total
          this.pageData.size = res.data.size
          this.pageData.pages = res.data.current
          this.tableData = res.data.records
          this.tableData.forEach((item, index) => {
            this.getColor(index)
          })
        })
      },
      //card的颜色
      getColor(index) {
        let R = Math.floor(Math.random() * 130 + 110)
        let G = Math.floor(Math.random() * 130 + 110)
        let B = Math.floor(Math.random() * 130 + 110)
        this.randomRgb[index] = {
          background: 'rgb(' + R + ',' + G + ',' + B + ', 0.3)',
        }
      },
      /**
       * @description 组件方法
       * @author haoChen 15239820820@163.com
       * @export
       * @param {}
       * @return {}
       */
      getImportData(type, row) {
        this.chooseImport = row
        let _this = this
        switch (type) {
          case 1:
            if (row.haveData == false) {
              this.$confirm('该数据集未录入数据，无法查看！', '提示', {
                showCancelButton: false,
                confirmButtonText: '确定',
                type: 'success',
              })
            } else {
              this.$router.push({
                path: '/resultData',
                query: {
                  chooseImport: _this.chooseImport,
                },
              })
            }
            break
          case 2:
            this.dialogShow(2)
            break
          /* 删除数据集 */
          case 4:
            this.deleteImport()
            break

          default:
            break
        }
      },
      /* 日期选择器返回数据 */
      getDateSE(row) {
        if (row != null) {
          this.query.startTime = row[0]
          this.query.endTime = row[1]
        } else {
          this.query.startTime = ''
          this.query.endTime = ''
        }
      },
      sizeChange(row) {
        this.pageData.size = row
        this.handleSearch()
      },
      pageChange(row) {
        this.pageData.pages = row
        this.handleSearch()
      },
      handleDialog() {
        this.updateImport()
      },
      updateImport() {
        let name = this.form.name
        let importId = this.form.importId
        if (name != '') {
          this.$loading.show()
          var qs = require('qs')
          var data = qs.stringify({
            name: name,
            importId: importId,
          })
          update_import(data)
            .then((res) => {
              this.$notify({
                title: '成功',
                message: res.message,
              })
              this.$loading.close()
              this.clearDialog()
              this.handleSearch()
            })
            .catch((err) => {
              this.$loading.close()
            })
        } else {
          this.$notify.error({
            title: '错误',
            message: '数据集名称不能为空！',
          })
        }
      },
      dialogClose(done) {
        this.$confirm('确认关闭？')
          .then((_) => {
            done()
            this.clearDialog()
          })
          .catch((_) => {})
      },
      clearDialog() {
        this.dialogVisible = false
        this.form = {
          name: '',
          importId: '',
        }
      },
      deleteImport() {
        this.$confirm('数据集删除后无法恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            let importId = this.chooseImport.importData.id
            var qs = require('qs')
            var data = qs.stringify({
              importId: importId,
            })
            this.$loading.show()
            delete_import(data)
              .then((res) => {
                this.$notify({
                  title: '成功',
                  type: 'success',
                  message: res.message,
                })
                this.$loading.close()
                this.handleSearch()
              })
              .catch((err) => {
                this.$loading.close()
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消录入',
            })
          })
      }, //dialog展示按钮 type： 1 新增、2编辑、 3、银行dialog上传
      dialogShow(type) {
        switch (type) {
          case 1:
            this.dialogVisible = true
            this.dialogType = type
            this.dialogTitle = '新增数据集'
            break
          case 2:
            this.dialogVisible = true
            this.dialogType = type
            this.dialogTitle = '编辑数据集'
            this.form.name = this.chooseImport.importData.name
            this.form.importId = this.chooseImport.importData.id
            break
          case 3:
            this.$refs['uploadBank'].openDialog()
            break
        }
      },
    },
    created() {},
    mounted() {
      this.getData()
    },
  }
</script>

<style scoped>
  .pagination {
    float: left;
  }
  .handle-box {
    margin-bottom: 20px;
  }
  .handle-select {
    width: 400px;
  }

  .handle-input {
    width: 200px;
    display: inline-block;
  }
  .mr10 {
    margin-right: 10px;
  }
  .button {
    background: rgba(0, 0, 255, 0.2);
    border-radius: 10px;
    border: 1px solid #295a85;
    color: #00ffff;
    text-shadow: 0 0 25px #00ffff;
    font-weight: 700;
  }
  .text {
    color: #00ffff;
    font-weight: 500;
  }
</style>
<style lang="less" scoped>
  /deep/.el-dialog {
    border-radius: 5px;
    background: rgba(48, 89, 224, 0.8);
  }
  /deep/.el-dialog__headerbtn .el-dialog__close {
    color: #ffffff;
  }
</style>
